Workflow Proposal for Zoom Tests ~ 1.4.4 Resize Text (Level AA)

Workflow Used by the Accessibility Team

Following Deque's guidance, the tool selected by the team to verify this criterion is the browser's DevTools.

Difficulties with the Previous Workflow

The DevTools interface zoom does not apply a Browser Zoom — this zoom enlarges the UI but does not directly affect the Viewport. In cases where a viewport change was observed when applying DevTools zoom to 200%, it is because the viewport container changes its width to avoid overflowing against the side panel (DevTools). If this zoom were truly modifying the Viewport, it would trigger the page's media queries/breakpoints and ideally change the layout.

The viewport is only affected when DevTools zoom is set to 150% because it doesn't fit on screen; for other scale values, the Viewport was not affected.

Steps for the New Workflow

1. Confirm that the screen scaling is set to 100%
   • Windows 11: Right-click on the desktop / Display options / Scale
2. Open the Chrome browser
3. Press F12 or Ctrl + Shift + I. Mac: ⌘ + ⌥ + I
4. Verify that Responsive mode is disabled
5. Drag the DevTools sidebar until the desired Viewport size is reached
6. At this point, zoom in to reach 200%

Before measuring, confirm in the DevTools toolbar that:

• Responsive mode is disabled
• The Viewport is at the desired size
• The scale indicator reads 1.00
• You know the screen resolution you are working at

Another Approach to Achieve 200% Zoom

With Responsive mode enabled, divide the viewport dimensions in half (height and width). This equivalence is explained below.

Website to Check Current Viewport

https://whatismyviewport.com/

Concepts

Viewport

In terms of web browsers, this refers to the portion of the document that you are viewing, which is currently visible in your window. Content outside the viewport is not visible on screen until it is scrolled into view. The portion of the viewport that is currently visible is called the visual viewport. This can be smaller than the layout viewport — for example, when the user zooms in. The layout viewport remains the same, but the visual viewport becomes smaller.

Resource: https://developer.mozilla.org/en-US/docs/Glossary/Viewport

DPR

The device pixel ratio (DPR) is a property that indicates the relationship between the physical pixels of the screen and the logical or CSS pixels that the browser uses to draw the interface.

In other words, it tells you how many real pixels there are per each "pixel" you see in the web design.

Device	Physical Resolution	CSS Resolution (viewport)	DPR	Visual Result
1080p laptop without scaling	1920×1080	1920×1080	1	1 CSS pixel = 1 physical pixel
1080p laptop at 150% scale	1920×1080	1280×720	1.5	Each CSS pixel occupies 1.5 physical pixels
Modern iPhone (Retina)	1170×2532	390×844	≈3	High density; everything looks sharper

Resource: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Equivalence Between Viewport and Zoom

Reducing a Viewport from 1366x768 pixels to half its height and width is equivalent to zooming to 200%. Applying 200% Browser Zoom at a resolution of 1366x768 is the same as having the viewport at 683x384.

Resource: https://www.w3.org/WAI/standards-guidelines/act/rules/59br37/proposed